{% extends "title_base.html"  %}

{% block title  %}
{% load static %}
<link type="image/x-icon" rel="shortcut icon" href="{% static "favicon.ico" %}">
<link type="text/css" rel="stylesheet" href="{% static "css/common.css" %}">
<link type="text/css" rel="stylesheet" href="{% static "css/play.css" %}">

</head>
<body>
    <!-- 内嵌 CSS -->
    <style>
        /* 设置背景视频或图像 */
        .background-image {
            position: fixed; /* 让背景固定在页面 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("https://haowallpaper.com/link/common/file/previewFileImg/15812062198337856"); /* 设置背景图像 */
            background-size: cover; /* 背景图像覆盖整个页面 */
            background-position: center; /* 背景图像居中 */
            background-attachment: fixed; /* 背景固定，滚动时不动 */
            z-index: -1; /* 确保背景图在页面内容的下方 */
        }

        /* 页面内容区域 */
        .index {
            position: relative;
            z-index: 1; /* 保证页面内容在背景之上 */
        }
    </style>

    <!-- 背景图 -->
    <div class="background-image"></div>
	<div class="header">
		<a style="color: white;" href="/" class="logo" title="首页"><img src="{% static "image/logo.png" %}"></a>
		<div class="search-box">
			<!-- 歌曲查询 -->
            <form id="searchForm" action="{% url 'search' 1 %}" method="post" target="_blank">
            {% csrf_token %}
            <div class="search-keyword">
              <input id="kword" name="kword" type="text" class="keyword" maxlength="120" placeholder="音乐节"  />
            </div>
            <input id="subSerch" type="submit" class="search-button" value="搜 索" />
            </form>
            <div id="suggest" class="search-suggest"></div>
            <div class="search-hot-words">
                {% for song in search_song  %}
                <a style="color: white;" target="play" href="{% url 'play' song.song.song_id %}" >{{ song.song.song_name }}</a>
                {% endfor  %}
            </div>
		</div>
	</div><!--end header-->
	<div class="nav-box">
		<div class="nav-box-inner">
			<ul class="nav clearfix">
				<li><a style="color: white;" href="/">首页</a></li>
				<li><a style="color: white;" href="{% url 'ranking' %}" target="_blank">歌曲排行</a></li>
	    	    <li><a style="color: white;" href="{% url 'home' 1 %}" target="_blank">用户中心</a></li>
			</ul>
		</div>
	</div><!--end nav-box-->
	<!--后期修改-->
	<div class="wrapper clearfix">
        <div class="content">
            <div class="product-detail-box clearfix">
                <div class="product-pics">
                    <div class="music_box">
                        <div id="jquery_jplayer_1" class="jp-jplayer" data-url={% static "songFile/" %}{{ song_info.song_file }}></div>
                        <div class="jp_img layz_load pic_po" title="点击播放"><img data-src={% static "songImg/" %}{{ song_info.song_img }}></div>
                        <div id="jp_container_1" class="jp-audio">
                            <div class="jp-gui jp-interface">
                                <div class="jp-time-holder clearfix">
                                    <div class="jp-progress">
                                        <div class="jp-seek-bar">
                                            <div class="jp-play-bar"></div>
                                        </div>
                                    </div>
                                    <div class="jp-time">
                                        <span class="jp-current-time"></span> /
                                        <span class="jp-duration"></span>
                                    </div>
                                </div>
                                <div class="song_error_corr" id="songCorr">
                                    <b class="err_btn">纠错</b>
                                    <ul>
                                        <li><span>歌词文本错误</span></li>
                                        <li><span>歌词时间错误</span></li>
                                        <li><span>歌曲错误</span></li>
                                    </ul>
                                </div>
                                <div class="jp-volume-bar">
                                    <div class="jp-volume-bar-value"></div>
                                </div>
                                <ul class="jp-controls clearfix">
                                    <li><a class="jp-play" tabindex="1" title="play"></a><a class="jp-pause" tabindex="1" title="pause"></a></li>
                                    <li><a class="jp-stop" tabindex="1" title="stop"></a></li>
                                    <li><a class="jp-repeat" tabindex="1" title="repeat"></a><a class="jp-repeat-off" tabindex="1" title="repeat off"></a></li>
                                    <li class="sound"><a class="jp-mute" tabindex="1" title="mute"></a><a class="jp-unmute" tabindex="1" title="unmute"></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="jplayer_content">
                            <ul id="lrc_list" class="lrc_list"></ul>
                        </div>
                    </div><!--end music_box-->
                    <textarea id="lrc_content" style="display: none;">
                      {{ song_lyrics }}
                    </textarea>
                </div><!--end product-pics-->
                <div class="product-detail-main">
                    <div class="product-price">
                        <h1 id="currentSong" style="color: white;">{{ song_info.song_name }}</h1>
                        <div class="product-price-info">
                            <span style="color: white;">歌手：{{ song_info.song_singer }}</span>
                        </div>
                        <div class="product-price-info">
                            <span style="color: white;">专辑：{{ song_info.song_album }}</span>
                            <span style="color: white;">语种：{{ song_info.song_languages }}</span>
                        </div>
                        <div class="product-price-info">
                            <span style="color: white;">流派：{{ song_info.song_type }}</span>
                            <span style="color: white;">发行时间：{{ song_info.song_release }}</span>
                        </div>
                    </div><!--end product-price-->
                    <div class="product-comment">
                        <div class="links clearfix">
                            <a class="minimum-link-A click_down" href="{% url 'download' song_info.song_id %}">下载</a>
                            <a class="minimum-link-A" href="{% url 'comment' song_info.song_id %}" >歌曲点评</a>
                        </div><!-- end links-->
                        <h3 class="list_title">当前播放列表</h3>
                        <ul class="playing-li" id="songlist">
                            <!--播放列表-->
                            {% for list in play_list %}
                            {%if list.song_id == song_info.song_id %}
                            <li data-id="{{list.song_id}}" class="current">
                            {%else %}
                            <li data-id="{{list.song_id}}">
                            {%endif %}
                            <span style="color: white;" class="num">{{forloop.counter}}</span>
                            <a style="color: white;" class="name" href="{% url 'play' list.song_id %}" target="play" >{{list.song_name}}</a>
                            <a style="color: white;" class="singer" href="javascript:;" target="_blank" >{{list.song_singer}}</a>
                            </li>
                            {%endfor %}
                        </ul>
                        <div class="nplayL-btns" id="playleixin">
                        <ul>
                            <li class="order current" data-run="order">
                                <a class="icon" href="javascript:void(0)" title="顺序播放"></a>
                            </li>
                            <li class="single" data-run="single">
                                <a class="icon" title="单曲循环" href="javascript:void(0)"></a>
                            </li>
                            <li class="random" data-run="random">
                                <a class="icon" title="随机播放" href="javascript:void(0)"></a>
                            </li>
                            <li class="next" data-run="next">
                                <a href="javascript:void(0)"><i></i>播放下一首</a>
                            </li>
                            </ul>
                        </div><!--end nplayL-btns-->
                    </div><!-- end product-comment -->
                </div><!-- end product-detail-main -->
            </div><!-- end product-detail-box -->

            <div class="section">
                <div class="section-header">
                    <h3>相关歌曲</h3>
                </div>
                <div class="section-content">
                    <div class="parts-box">
                        <a href="javascript:;" target="_self" id="J_PartsPrev" class="prev-btn"><i></i></a>
                        <div class="parts-slider" id="J_PartsList">
                            <div class="parts-list-wrap f_w">
                                <ul id="" class="parts-list clearfix f_s">
                                    {% for item in song_relevant %}
                                    <li>
                                        {% if item.song.song_id != song_info.song_id %}
                                        <a style="color: white;" class="pic layz_load pic_po" href="{% url 'play' item.song.song_id %}" target="play" >
                                            <img data-src="{% static "songImg/" %}{{ item.song.song_img }}">
                                        </a>
                                        <h4><a style="color: white;" href="{% url 'play' item.song.song_id %}" target="play" >{{ item.song.song_name}}</a></h4>
                                        <a style="color: white;" href="javascript:;" class="J_MoreParts accessories-more">{{ item.song.song_singer }}</a>
                                        {% endif %}
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                        <a href="javascript:;" target="_self" id="J_PartsNext" class="next-btn"><i></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

	<script data-main="{% static "js/play.js" %}" src="{% static "js/require.js" %}"></script>
{% endblock  %}